<template>
  <div id="customOrder">
    <header>
      <i @click="goBack()"></i>
      <div>我的订单</div>
    </header>
    <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
      <ul class="list">
        <div class='mc' v-if="list.length<1">
          <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
          <p>您还没有相关的订单</p>
        </div>
        <li v-for="(item,index) in list" :key='index'>
          <router-link :to="{name:'cust_orderdetail',query: {docArr: item.docArr}}">
            <ul>
              <li>
                <span class='bold'>{{item.time}}</span>
              </li>
              <li>
                <span>订单号</span>
                <span class="order_num">{{item.order_num}}</span>
              </li>
              <li>
                <span>需求描述:</span>
                <i>{{item.demand}}</i>
              </li>
            </ul>
          </router-link>
        </li>
      </ul>
    </Loadmore>

  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        list: [],
        userid: '',
        sentPage: {
          page: 1,
          rows: "10"
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
      }
    },
    components: {
      Loadmore,
    },
    methods: {
      goBack() {
        this.$router.back();
      },
      getList(params) {
        this.userid = localStorage.getItem("loginMobile");
        this.list = [];
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/patient_order/0?userid=" + this.userid, params, r => {
          this.totalNum = r.data.records;
          if (this.sentPage.page == 1) {
            this.list = r.data.rows;
          } else {
            this.list = this.list.concat(r.data.rows);
          }
          if (r.data.rows.length == 0 && this.sentPage.page > 1) {
            this.$utils._toast("暂无更多数据");
          }
          if (this.totalNum == this.list.length) {
            this.allLoaded = true;
          }

        }, err => {
          console.log(err);
        })

      },
      //上拉加载下一页
      loadBottom() {
        (this.sentPage.page) ++;
        this.$refs.loadmore.onBottomLoaded();
      },

    },
    created() {
      this.getList(this.sentPage);
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    img {
      display: block;
      margin: 0 auto;
    }
    p {
      padding-top: 10px;
      text-align: center;
    }
  }

  .order_num {
    width: calc(100% - 100px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

</style>
